<template>
    <div>
        <!-- 头部导航栏 -->
        <div class="header">
            <!-- 点击跳转用户首页 -->
            <img style="width:90px" @click="toPage('/userIndex')" src="../assets/image/logo.png" />
            <!-- 菜单项 -->
            <div class="header1">
                <div @click="toPage('/userIndex')" class="menu-item">首页</div>
                <div @click="toPage('/userEquipment')" class="menu-item">滑雪设备</div>
                <div @click="toPage('/userTrack')" class="menu-item">滑雪赛道</div>
                <div @click="toPage('/userCoach')" class="menu-item">教练展示</div>
                <div @click="toPage('/userOwn')" class="menu-item">个人中心</div>
            </div>
            <!-- 右上角用户信息和退出 -->
            <div class="header2">
                <div class="header3">
                    <!-- 显示当前用户名称 -->
                    {{ userStore.userInfo?.name }}
                </div>
                <div class="header4" @click="loginOut">退出登录</div>
            </div>
        </div>

        <!-- 滑雪设备展示区 -->
        <div class="equipment-showcase">
            <h1 class="title">滑雪设备展示</h1>
            <!-- 设备卡片列表 -->
            <div class="equipment-grid">
                <div v-for="equipment in tableData" :key="equipment.id" class="equipment-card">
                    <!-- 点击设备卡片触发租赁 -->
                    <div class="equipment-info" @click="rent(equipment)">
                        <h2 class="equipment-name">{{ equipment.name }}</h2>
                        <p class="equipment-description">{{ equipment.description }}</p>
                        <!-- 设备状态显示，状态不同颜色不同 -->
                        <span class="equipment-status" :class="equipment.status">{{ equipment.status }}</span>
                    </div>
                </div>
            </div>

            <!-- 租赁弹窗 -->
            <el-dialog title="租赁信息" v-model="dialogTableVisible" width="30%" style="margin-top: -50px">
                <el-form :model="rentForm" label-width="auto" style="max-width: 600px">
                    <!-- 用户名（只读） -->
                    <el-form-item label="用户名">
                        <el-input v-model="rentForm.uname" readonly />
                    </el-form-item>
                    <!-- 设备ID（只读） -->
                    <el-form-item label="设备ID">
                        <el-input v-model="rentForm.eid" readonly />
                    </el-form-item>
                    <!-- 设备名称（只读） -->
                    <el-form-item label="设备名称">
                        <el-input v-model="rentForm.ename" readonly />
                    </el-form-item>
                    <!-- 设备图片展示 -->
                    <el-form-item label="设备图片">
                        <img :src="rentForm.img" alt width="200px" />
                    </el-form-item>
                    <!-- 提交租赁按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click="doRent">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/userStore'

const router = useRouter()
// 使用 Pinia 用户状态管理
const userStore = useUserStore()

// 控制租赁弹窗显示隐藏
const dialogTableVisible = ref(false)
// 存储设备列表数据
const tableData = ref([])
// 租赁表单数据
const rentForm = ref({
    uid: '',    // 用户ID
    uname: '',  // 用户名
    eid: '',    // 设备ID
    ename: '',  // 设备名称
    img: ''     // 设备图片地址
})

// 页面跳转函数，传入路径参数
function toPage(path) {
    router.push(path)
}

// 退出登录函数
function loginOut() {
    // 弹出确认框，确认是否注销
    ElMessageBox.confirm('注销登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 用户确认后调用 Pinia 的 logout，并跳转登录页
        userStore.logout(router)
    })
}

// 点击设备卡片租赁操作
function rent(equipment) {
    const status = equipment.status
    if (status === '可用') {
        // 设备可租赁，打开弹窗并填充租赁表单信息
        dialogTableVisible.value = true
        rentForm.value.uid = userStore.userInfo.id
        rentForm.value.uname = userStore.userInfo.name
        rentForm.value.eid = equipment.id
        rentForm.value.ename = equipment.name
        rentForm.value.img = equipment.img
    } else {
        // 设备不可租赁，弹出警告提示
        ElMessage({
            message:
                status === '租出'
                    ? '设备已租出，请选择其他设备'
                    : '设备维修中，请选择其他设备',
            type: 'warning'
        })
    }
}

// 提交租赁请求
function doRent() {
    axios
        .post(`http://localhost:8181/equipment/rent/${rentForm.value.eid}/${rentForm.value.uid}`)
        .then((response) => {
            if (response.data === true) {
                // 租赁成功，弹出提示，确认后刷新页面
                ElMessageBox.alert(`设备【${rentForm.value.ename}】出租成功`, '', {
                    confirmButtonText: '确定',
                    callback: () => {
                        location.reload()
                    }
                })
            }
        })
}

// 组件挂载后初始化执行
onMounted(() => {
    // 从 localStorage 加载用户状态
    userStore.loadFromLocal()
    // 未登录则跳转登录页
    if (!userStore.isLoggedIn) {
        router.replace('/login')
        return
    }
    // 获取设备列表数据
    axios.get('http://localhost:8181/equipment/list').then((response) => {
        tableData.value = response.data
    })
})
</script>

<style src="../assets/css/header.css"></style>

<style scoped>
/* 设备展示区样式 */
.equipment-showcase {
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 600px;
}

.title {
    text-align: center;
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 20px;
    animation: fadeInDown 1s;
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.equipment-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 20px;
}

.equipment-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.equipment-info {
    text-align: center;
}

.equipment-name {
    font-size: 1.5rem;
    color: #34495e;
    margin-bottom: 10px;
}

.equipment-description {
    font-size: 1rem;
    color: #7f8c8d;
    margin-bottom: 10px;
}

.equipment-status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    color: white;
}

.equipment-status.可用 {
    background-color: #2ecc71;
}

.equipment-status.租出 {
    background-color: #e74c3c;
}

.equipment-status.维修中 {
    background-color: #f39c12;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
